<html>
<head>
<title>inputEx Builder: generate inputEx Forms</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='css/inputEx.css' />

<style>
#mainTable {
   width: 100%;
}

#mainTable td.mainTableTd {
   vertical-align: top; 
   width: 50%;
   padding: 10px;
}


#groupContainer {
    border: 1px solid #9999ff; background-color: #eeeeff; padding: 10px;
     width: 90%;
   margin: auto;
}

#container {
   border: 1px solid #9999ff; background-color: #eeeeff; padding: 10px;
    width: 90%;
   margin: auto;
}

p.tdTitle {
   font-size: 14pt;
   margin: 5px;
   text-align: center;
}

#codeGenerator {
   width: 100%;
}

#pagetitle {
background:#B6CDE1 url(http://us.i1.yimg.com/us.yimg.com/i/ydn/bg_hd.gif) repeat-x scroll 0pt;
border:1px solid #93B2CC;
position:relative;
margin: 10px;
}

#pageTitle h1 {
   font-size:120%;
   font-weight:bold;
   left:-1px;
   margin:0pt -2px 0pt 0pt;
   padding:4px 0pt 2px;
   position:relative;
   text-indent:15px;
   top:-1px;
}
#loadButton {
	margin: 20px;
	font-size: 15pt;
}
</style>


</head>

<body class="yui-skin-sam">
	
	<p style="text-align: center; font-size: 18pt; font-weight: bold; margin: 10px;">inputEx Builder</p>
	
	<div id="pageTitle"><h1>inputEx: Form Builder utility</h1></div>
	
	<p style="margin: 10px;">inputEx Builder is a tool to create forms using the <a href="http://javascript.neyric.com/inputex/">inputEx library</a></p>
	
	<table id='mainTable' style="width: 100%;">
		<tr>
			<td class='mainTableTd'>
				<p class="tdTitle">1. Build</p>
				<div id='container'></div>
				<button id='loadButton'></button>
			</td>
			<td class='mainTableTd'>
				<p class="tdTitle">2. Preview</p>
				<div id='groupContainer'></div>
				
					<p class="tdTitle">3. Get the code</p>
					<button id='generateButton'>Generate a page for this Form</button>
					<textarea id='codeGenerator' rows=30></textarea>
			</td>
		</tr>
		
	</table>
	

<!-- YUI Library -->
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/json/json-min.js"></script>

<!-- Other libraries -->
<script src="lib/jsonPretty.js"  type='text/javascript'></script>

<!-- InputEx -->
<script src="js/inputex.js"  type='text/javascript'></script>
<script src="js/Visus.js"  type='text/javascript'></script>
<script src="js/Field.js"  type='text/javascript'></script>
<script src="js/fields/StringField.js"  type='text/javascript'></script>
<script src="js/fields/RadioField.js"  type='text/javascript'></script>
<script src="js/fields/CombineField.js"  type='text/javascript'></script>
<script src="js/Group.js"  type='text/javascript'></script>
<script src="js/Form.js"  type='text/javascript'></script>
<script src="js/fields/CheckBox.js"  type='text/javascript'></script>
<script src="js/fields/ColorField.js"  type='text/javascript'></script>
<script src="js/fields/EmailField.js"  type='text/javascript'></script>
<script src="js/fields/HiddenField.js"  type='text/javascript'></script>
<script src="js/fields/PasswordField.js"  type='text/javascript'></script>
<script src="js/fields/Textarea.js"  type='text/javascript'></script>
<script src="js/fields/UrlField.js"  type='text/javascript'></script>
<script src="js/fields/IntegerField.js"  type='text/javascript'></script>
<script src="js/fields/NumberField.js"  type='text/javascript'></script>
<script src="js/fields/ListField.js"  type='text/javascript'></script>
<script src="js/fields/SelectField.js"  type='text/javascript'></script>
<script src="js/fields/RTEField.js"  type='text/javascript'></script>
<script src="js/fields/UneditableField.js"  type='text/javascript'></script>
<script src="js/fields/PairField.js"  type='text/javascript'></script>
<script src="js/fields/InPlaceEdit.js"  type='text/javascript'></script>
<script src="js/fields/SliderField.js"  type='text/javascript'></script>
<script src="js/fields/TimeField.js"  type='text/javascript'></script>
<script src="js/fields/DateField.js"  type='text/javascript'></script>
<script src="js/fields/DatePickerField.js"  type='text/javascript'></script>
<script src="js/fields/DateTimeField.js"  type='text/javascript'></script>
<script src="js/widgets/Dialog-beta.js"  type='text/javascript'></script>
<script src="js/ext/UpperCaseField/UpperCaseField.js"  type='text/javascript'></script>
<script src="js/ext/IPv4Field/IPv4Field.js"  type='text/javascript'></script>
<script src="js/ext/VectorField/VectorField.js"  type='text/javascript'></script>

<!-- TypeField should be in last !-->
<script src="js/fields/TypeField.js"  type='text/javascript'></script>

<script src="js/json-schema.js"></script>


<script>
YAHOO.util.Event.onDOMReady(function() {
	
	YAHOO.inputEx.spacerUrl = "images/space.gif";
	
	var g = new inputEx.Group({parentEl: 'container', fields: inputEx.Group.groupOptions});
	
  g.setValue({
   	"fields" : [
		  {
   			"type" : "string",
   			"inputParams" : {
   				"typeInvite" : "firstname",
   				"name" : "firstname",
   				"label" : "Firstname"
   			}
   		},
   		{
   			"type" : "string",
   			"inputParams" : {
   				"typeInvite" : "lastname",
   				"name" : "lastname",
   				"label" : "Lastname"
   			}
   		},
   		{
   			"type" : "email",
   			"inputParams" : {
	   			"label" : "Email",
   				"name" : "",
   				"required" : false
   			}
   		}
   	],
   	"collapsible" : true,
   	"legend" : "User"
   }, false);

	
	var rebuildPreview = function() { 
      var value = g.getValue();
      var previewGroup = new inputEx.Group(value);

      var groupContainer = YAHOO.util.Dom.get('groupContainer');
      groupContainer.innerHTML = "";
      groupContainer.appendChild(previewGroup.getEl());

      var codeContainer = YAHOO.util.Dom.get('codeGenerator');
      codeContainer.innerHTML = value.toPrettyJSONString(true);
   };

	rebuildPreview();
   
   // Update the preview event
   g.updatedEvt.subscribe(rebuildPreview);

	
	 // Generate Page:
	YAHOO.util.Event.addListener('generateButton', 'click', function() {

		var html = [
			"<html>",
			"<head>",
			"  <title>inputEx Builder: generate inputEx Forms</title>",
			"  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />\n",
			"  <!-- YUI CSS -->",
			"  <link rel='stylesheet' type='text/css' href='lib/yui/reset-fonts/reset-fonts.css'>",
			"  <link rel='stylesheet' type='text/css' href='lib/yui/assets/skins/sam/skin.css'>\n",
			"  <!-- InputEx CSS -->",
			"  <link type='text/css' rel='stylesheet' href='css/inputEx.css' />\n",
			"  <style>",
			"#formContainer {",
			"background-color:#EEEEFF;",
			"border:1px solid #9999FF;",
			"margin:50px;",
			"padding:10px;",
			"}",
			"  </style>",
			"</head>\n",
			"<body class='yui-skin-sam'>",
			"	 <div id='formContainer'> </div>",
			"",
			"<!-- YUI Library -->",
			"<scr"+"ipt type='text/javascript' src='lib/yui/utilities/utilities.js'></scr"+"ipt>",
			"<scr"+"ipt type='text/javascript' src='lib/yui/container/container-min.js'></scr"+"ipt>",
			"<scr"+"ipt type='text/javascript' src='lib/yui/button/button-min.js'></scr"+"ipt>",
			"<scr"+"ipt type='text/javascript' src='lib/yui/calendar/calendar-min.js'></scr"+"ipt>",
			"",
			"<!-- InputEx -->",
			"<scr"+"ipt src='js/inputex.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/Visus.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/Field.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/StringField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/RadioField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/CombineField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/Group.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/Form.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/CheckBox.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/ColorField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/EmailField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/HiddenField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/PasswordField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/Textarea.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/UrlField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/IntegerField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/NumberField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/ListField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/SelectField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/RTEField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/UneditableField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/PairField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/InPlaceEdit.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/SliderField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/TimeField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/DateField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/DatePickerField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/DateTimeField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/ext/UpperCaseField/UpperCaseField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/ext/IPv4Field/IPv4Field.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/ext/VectorField/VectorField.js'  type='text/javascript'></scr"+"ipt>",
			"<scr"+"ipt src='js/fields/TypeField.js'  type='text/javascript'></scr"+"ipt>",
			
			"<scr"+"ipt>",
			"var formDef = "+g.getValue().toPrettyJSONString(true)+";",
			"formDef.parentEl = 'formContainer';",
			"YAHOO.util.Event.onDOMReady(function(){ new inputEx.Group(formDef); });",
			
			"</scr"+"ipt>",
			
			"</body>",
			"</html>"
		];

	   // Center popup
	   var Posx = screen.width /2;
	   var Posy = screen.height /2;
	   Posx -= (this.windowWidth/2);
	   Posy -= (this.windowHeight/2);

	   var formPage = window.open("",'InputExForm','left='+Posx+',top='+Posy+
																									 ',width=850,height=600,toolbar=no,scrollbars,resizable=yes');

	   formPage.document.write(html.join("\n"));
	   formPage.document.close();
	});
	

	// Add a popup and a load button
	Example1 = {};
	var oButton = new YAHOO.widget.Button("loadButton", {checked: false, label: "Load"});
	oButton.addListener("click", function() {Example1.myPanel.show();}); 
	var formConfig = {
       type: 'form',
       inputParams: {
          fields: [ 
						{type: 'text', inputParams: {name: 'code', cols: 50, rows: 10} },
						{type: "radio",inputParams: {
										label : "Format",
										name : "format",
										choices : ["inputEx JSON","JSON Schema"],
										value: "inputEx JSON"
									}
						}
					],
          buttons: [
             {type: 'button', value: 'Load', onClick: function() { 
	
							  var value = Example1.myPanel.getForm().getValue();
							
								try {
							  	var code = eval('('+value.code+')');
								} catch(ex) {
									alert("Error during JSON evaluation");
									return;
								}
							
								// Build using JSON Schema
								if(value.format == "JSON Schema") {
									
									try {
									var builder = new YAHOO.inputEx.JsonSchema.Builder({
										'schemaIdentifierMap': code,
									  'defaultOptions':{
									     'showMsg':true
									  }
								  });
									var lastSchema = (function(o){var r;for(var k in o){if(o.hasOwnProperty(k))r = o[k];} return r;})(code);
									var m = builder.schemaToInputEx(lastSchema);
									g.setValue(m.inputParams);
									
									} catch(ex) {
										return;
									}
									
								} // OR standard inputEx JSON
								else { // value.format == "inputEx JSON"
									g.setValue(value);
								}
								
								Example1.myPanel.hide();
					 }},
             {type: 'button', value: 'Cancel', onClick: function() { Example1.myPanel.hide(); } }
          ]
       }
    };
		Example1.myPanel = new inputEx.widget.Dialog({
			inputExDef: formConfig,
			title: 'Copy/Paste your inputEx JSON or JSON Schema here :',
			panelConfig: {
						constraintoviewport: true, 
						underlay:"shadow", 
						close:true, 
						fixedcenter: true,
						visible:false, 
						draggable:true,
						modal: true
			}
			
		});
		
		
});

</script>
	
</body>
</html>

